<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天气案例_深度监视_简写</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>今天天气很{{wetherInfo}}</h1>
			<button type="button" @click="changeWether">切换天气</button>
		</div>
	</body>
	<script type="text/javascript">
		const vm = new Vue({
			el: '#root',
			data: {
				isHot: false,
			},
			methods: {
				changeWether() {
					//this.wether = this.isHot ? '凉爽' : '炎热'
					this.isHot = !this.isHot
				}
			},
			computed: {
				wetherInfo() {
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			watch: {
				//正常写法
				// isHot: {
				// 	//immediate: true,
				// 	//deep:true,
				// 	handler(newValue, oldValue) {
				// 		console.log('aaa', newValue, oldValue)
				// 	}
				// }
				/* 
				简写，要监视的属性只有handler，没有deep,imediate才可以简写
				 */
				// isHot(newValue, oldValue) {
				// 	console.log('简写', newValue, oldValue)
				// }
			}
		})

		//完整写法
		// vm.$watch('isHot', {
		// 	immediate: true,
		// 	deep: true,
		// 	handler(newValue, oldValue) {
		// 		console.log('aaa', newValue, oldValue)
		// 	}
		// })
		//简写
		vm.$watch('isHot',function(newValue,oldValue){
			console.log('$简写', newValue, oldValue)
		})
	</script>
</html>